<template>
  <div>
    <el-table :data="columnInfoData" style="width: 100%">
      <el-table-column prop="title" :label="$t('model.field-chinese-name')" width="150"></el-table-column>
      <el-table-column prop="name" :label="$t('model.field-english-name')" width="150"></el-table-column>
      <el-table-column prop="type" :label="$t('model.field-type')" width="150"></el-table-column>
      <el-table-column prop="isPrimaryKey" :label="$t('model.primary-key')" width="150"></el-table-column>
      <el-table-column prop="isForeignKey" :label="$t('model.foreign-key')" width="150"></el-table-column>
      <el-table-column prop="nullable" :label="$t('model.non-null')" width="150"></el-table-column>
      <el-table-column prop="isIndex" :label="$t('model.index')" width="150"></el-table-column>
      <el-table-column prop="dataQualityList" :label="$t('model.data-quality')" width="150">
        <template slot-scope="scope">
          <el-button
            type="success"
            @click="handleQualityBtnClick(scope.row)"
            icon="el-icon-plus"
            size="mini"
            circle
          ></el-button>
          <el-tag
            type="primary"
            v-for="qualityRule in scope.row.qualityRuleList"
            :key="qualityRule.qualityRuleColumnConfigId"
            closable
            @close="handleQualityRuleTagClose(scope.row.id,qualityRule)"
          >{{ qualityRule.qualityRuleName}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="datamaskId" :label="$t('model.data-masking')">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.datamaskId ==undefined"
            type="primary"
            @click="handleMaskingBtnClick(scope.row)"
            icon="el-icon-plus"
            size="mini"
            circle
          ></el-button>
          <div v-else>
            <el-button
              :type="scope.row.securityLevelCode==4?'danger':scope.row.securityLevelCode==3?'warning':scope.row.securityLevelCode==2?'info':'sucess'"
              round
              size="mini"
            >{{ scope.row.securityLevelCode}}</el-button>
            <el-tag
            style="margin-left:3px;"
              :key="scope.row.datamaskId"
              :type="scope.row.securityLevelCode==4?'danger':scope.row.securityLevelCode==3?'warning':scope.row.securityLevelCode==2?'info':'sucess'"
              closable
              @close="handleMaskRuleTagClose(scope.row)"
            >{{ scope.row.datamaskName}}</el-tag>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <v-qualityruledialog
      :dialogVisible="qualityDialogVisible"
      :columnId="columnId"
      :columnName="columnName"
      :tableId="tableId"
      @qualityDialogClose="qualityDialogClose"
      @qualityDialogSave="qualityDialogSave"
    ></v-qualityruledialog>
    <v-maskRuleDialog
      :dialogVisible="maskDialogVisible"
      :columnId="columnId"
      :columnName="columnName"
      :tableId="tableId"
      @maskDialogClose="maskDialogClose"
      @maskDialogSave="maskDialogSave"
    ></v-maskRuleDialog>
  </div>
</template>

  <script>
import qualityRuleDialog from "./QualityRuleDialog";
import maskRuleDialog from "./MaskRuleDialog";
export default {
  data() {
    return {
      qualityDialogVisible: false,
      maskDialogVisible: false,
      columnId: 0,
      columnName: ""
    };
  },
  components: {
    "v-qualityruledialog": qualityRuleDialog,
    "v-maskRuleDialog": maskRuleDialog
  },
  mounted() {
  },
  methods: {
    handleQualityBtnClick(row) {
      this.columnId = row.id;
      this.columnName = row.name;
      this.qualityDialogVisible = true;
    },

    handleMaskingBtnClick(row) {
      this.columnId = row.id;
      this.columnName = row.name;
      this.maskDialogVisible = true;
    },
    handleQualityRuleTagClose(rowId, qualityRule) {
      var _this = this;
      this.axios
        .post(this.HOST + "modelcolumn/delQualityRule", {
          qualityRuleColumnConfigId: qualityRule.qualityRuleColumnConfigId
        })
        .then(function(res) {
          res = res.data;
          if (res.status == "1") {
            _this.EventBus.$emit("getColumnInfoData");
          } else {
            console.log(res.stackmessage);
          }
        })
        .catch(function(err) {
          console.log(err);
        });
    },
    handleMaskRuleTagClose(row) {
      var _this = this;
      this.axios
        .post(this.HOST + "modelcolumn/delMaskRule", {
          columnConfigId: row.columnConfigId
        })
        .then(function(res) {
          res = res.data;
          if (res.status == "1") {
             _this.EventBus.$emit("getColumnInfoData");
          } else {
            console.log(res.stackmessage);
          }
        })
        .catch(function(err) {
          console.log(err);
        });
    },
    qualityDialogClose(data) {
      this.qualityDialogVisible = false;
    },
    qualityDialogSave(data) {
      this.EventBus.$emit("getColumnInfoData");
      this.qualityDialogVisible = false;
    },
    maskDialogClose() {
      this.maskDialogVisible = false;
    },
    maskDialogSave() {
      this.EventBus.$emit("getColumnInfoData");
      this.maskDialogVisible = false;
    }
  },
  //父组件传过来的数据属性
  props: {
    tableId: {
      type: Number,
      required: true
    },
    displayAlias: {
      type: Boolean,
      required: true
    },
    displayNumber: {
      type: Number,
      required: true
    },
    columnInfoData: {
      type: Array
    }
  }
};
</script>